<template>
    <el-container>
        <el-header>
            <scFilterBar filterName="filterName" :options="options" @filterChange="changeBar" style="margin-top:15px;margin-right:150px">
				<template #default="{filterLength, openFilter}">
					<el-badge :value="filterLength" type="danger" :hidden="filterLength<=0">
						<el-button icon="el-icon-filter" @click="openFilter">高级查询</el-button>
					</el-badge>
				</template>
			</scFilterBar>
        </el-header>
        <!-- <el-header style="border-bottom:none">
            <div class="right-panel-search">
                <div class="search-input">维修单号</div>
                <el-input v-model="search.ref" placeholder="请输入维修单号" clearable></el-input>
                <div class="search-input">设备名称</div>
                <el-input v-model="search.title_keywords" placeholder="请输入设备名称" clearable></el-input>
                <div class="search-input">报修人</div>
                <el-input v-model="search.report" placeholder="请输入报修人" clearable></el-input>
                <div class="search-input">维修人</div>
                <el-input v-model="search.mai" placeholder="请输入维修人" clearable></el-input>
            </div>
        </el-header>
        <el-header style="border-top:none">
            <div class="right-panel-search">
                <div class="search-input">报修时间</div>
                <el-date-picker v-model="time" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :size="size"  />
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
                <sc-file-import :apiObj="$API.common.importFile" templateUrl="http://www.scuiadmin/file.xlsx" @success="success" ref="importBox"></sc-file-import>
            </div>
        </el-header> -->
        <el-main class="nopadding">
            <scTable ref="table" tableName="recordColumn" :apiObj="apiObj" :column="column" row-key="id" stripe :params="query" remoteSort remoteFilter border >
				<el-table-column fixed type="selection" width="50"></el-table-column>
                <el-table-column fixed type="index" label="序号" align="center" width="50"></el-table-column>
                <!-- 维修建议 -->
<!--                <template #suggest="{row}">-->
<!--                    <el-popover placement="top-start" :width="200" trigger="hover" :content="row.suggest">-->
<!--                        <template #reference>-->
<!--                            <el-button style="padding: 5px 0;" text class="m-2">{{row.suggest && row.suggest.substring(0, 8)}}···</el-button>-->
<!--                        </template>-->
<!--                    </el-popover>-->
<!--                </template>-->
                <!-- 故障图片 -->
                <template #img="{row}">
                    <el-image class="img" :src="row.img" :preview-src-list="[row.img]" hide-on-click-modal :initial-index="4" fit="cover" preview-teleported="true" />
                </template>
                <!-- 紧急程度 -->
                <template #urgent_name="scope">
                    <el-tag v-if="scope.row.urgent_name=='特急'" type="danger">特急</el-tag>
                    <el-tag v-if="scope.row.urgent_name=='紧急'" type="warning">紧急</el-tag>
                    <el-tag v-if="scope.row.urgent_name=='普通'" type="success">普通</el-tag>
                    <el-tag v-if="scope.row.urgent_name=='一般'" type="primary">一般</el-tag>
                </template>
                <!-- 故障描述 -->
                <template #remark="scope">
                    <el-popover placement="top-start" :width="200" trigger="hover" :content="scope.row.remark">
                    <template #reference>
                        <el-button style="padding: 5px 0;" text class="m-2" v-if="scope.row.remark">{{scope.row.remark && scope.row.remark.substring(0, 15)}}</el-button>
                    </template>
                    </el-popover>
                </template>
                <!-- 维修评价 -->
                <template #new_task_reason="{row}">
                    <div>
                        {{row.new_task_reason}}-{{row.new_task_handle}}-{{row.new_suggest}}-{{row.new_task_remark}}
                    </div>
                </template>
                <!-- 配件要求 -->
                <template #require="{row}">
                    <el-popover placement="top-start" :width="200" trigger="hover" :content="row.require">
                        <template #reference>
                            <el-button style="padding: 5px 0;" text class="m-2">{{row.require && row.require.substring(0, 8)}}···</el-button>
                        </template>
                    </el-popover>
                </template>
                <el-table-column label="操作" fixed="right" align="center" width="100">
                    <template #default="scope">
                        <el-button-group style="display:flex;flex-direction: column;">
                            <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)" v-auth="'weiRecord.show'">查看</el-button>
                            <el-button text type="primary" size="small" @click="edit(scope.row, scope.$index)" v-auth="'weiRecord.edit'">维修评价</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
			</scTable>
        </el-main>
    </el-container>
    <recird-detail v-if="dialog.recird" ref="recirdDialog" @success="handleSuccess" @closed="dialog.recird = false" draggable></recird-detail>
    <eva-luate v-if="dialog.luate" ref="luateDialog" @success="handleSuccess" @closed="dialog.luate = false" draggable></eva-luate>
</template>

<script>
import recirdDetail from './addRecird';
import EvaLuate from './evaLuate.vue';

export default {
  components: { recirdDetail,EvaLuate },
	data() {
		return {
			dialog: {
				save: false,
                human:false,
                luate:false,
			},
			groupFilterText: '',
			group: [],
			apiObj: this.$API.device.deviceTask.getService,
            search:{
                title_keywords:null,
                ref:null,
                type:null,
                report:null,
                mai:null,
                keywords:null,
                start_time:null,
                end_time:null,
                child:[],
            },
            time:"",
            query:{
                sta:2,
            },
            column: [
                {label: "维修单号",prop: "code",width: "150",},
                {label: "设备代码",prop: "device_code",width: "150",},
                {label: "设备名称",prop: "device_title",width: "150",},
                {label: "设备类别",prop: "deviceclass_title_code",width: "150",},
                {label: "故障类别",prop: "fault_title",width: "150",},
                {label: "紧急程度",prop: "urgent_name",width: "150",},
                {label: "报修人",prop: "admin_name",width: "150",},
                {label: "报修时间",prop: "create_time",width: "150",},
                {label: "验证人",prop: "check_name",width: "150",},
                {label: "验证时间",prop: "check_time",width: "150",},
                {label: "维修评价",prop: "new_task_reason",width: "150",},
                {label: "故障图片",prop: "img",width: "150",},
                {label: "故障描述",prop: "remark",width: "150",},
                {label: "维修人员",prop: "user_name",width: "150",},
                {label: "派单时间",prop: "task_time",width: "150",},
                {label: "维修建议",prop: "suggest",width: "150",},
                {label: "配件要求",prop: "require",width: "150",},
            ],
            options: [
                {label: '模糊查询',value: 'keywords',type: 'text',selected: true,placeholder: '请输入关键词',operator: 'include',
                    operators: [
                            {label: '包含',value: 'include',},
                            {label: '不包含',value: 'notinclude',},
                        ]},
                {label: '设备名称',value: 'title_keywords',type: 'text',selected: true,placeholder: '请输入设备名称',operator: 'include',
                    operators: [
                            {label: '包含',value: 'include',},
                            {label: '不包含',value: 'notinclude',},
                        ]},
                {label: '报修时间',value: 'create_time',type: 'daterange',operator: 'include',
                    operators: [
                            {label: '包含',value: 'include',},
                            {label: '不包含',value: 'notinclude',},
                        ]
                    },
            ]
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.group.filter(val);
		}
	},
	mounted() {
        this.getHum()
	},
	methods: {
		//修改
		edit(row) {
            this.dialog.luate = true;
            this.$nextTick(() => {
                this.$refs.luateDialog.open("edit").setData(row);
            });
		},
        // 查看
        table_show(row){
            this.dialog.recird = true
            this.$nextTick(() => {
                this.$refs.recirdDialog.open('show').setData(row)
            })
        },
		//删除
		async table_del(row, index) {
			var reqData = { id: row.id };
			var res = await this.$API.develop.edition.delete.post(reqData);
			if (res.code == 1) {
				//这里选择刷新整个表格 OR 插入/编辑现有表格数据
				this.$refs.table.tableData.splice(index, 1);
				this.$message.success("删除成功");
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
		},
		//搜索
		upsearch() {
            if(this.time!=null){
                this.search.start_time = this.time[0]
                this.search.end_time = this.time[1]
            }else{
                this.search.start_time = ""
                this.search.end_time = ""
            }
			this.$refs.table.upData(this.search)
		},
        //本地更新数据
		handleSuccess(data, mode) {
			if (mode == "add") {
				this.$refs.table.refresh();
			} else if (mode == "edit") {
				this.$refs.table.refresh();
			}
		},
        // 所有人员
        async getHum(){
            var res = await this.$API.all.getAdmin.get({is_page:0});
            this.humList = res.data
            let a = {label: '报修人',value: 'admin_name',type: 'select',operator: 'include',
                    operators: [
                            {label: '包含',value: 'include',},
                            {label: '不包含',value: 'notinclude',},
                        ],selected: true,placeholder: '请选择报修人',extend: {data:[]}}
            let b = {label: '维修人',value: 'check_admin_names',type: 'select',operator: 'include',
                    operators: [
                            {label: '包含',value: 'include',},
                        ],selected: true,placeholder: '请选择维修人',extend: {data:[]}}
            res.data.map(item=>{
                a.extend.data.push({
                    label:item.name,
                    value:item.id
                })
                b.extend.data.push({
                    label:item.name,
                    value:item.id
                })
            })
            this.options.push(a,b)
        },
        changeBar(data){
            this.search.child = data
            this.upsearch()
        },
	}
}
</script>

<style lang="scss">
.search-input {
	width: auto;
	font-size: 14px;
}
.day{
    display: flex;
    justify-content: center;
}
.shopInfo{
    display: flex;
    align-items: center;
    justify-content: center;
    .right{
        margin-left: 5px;
        text-align: start;
    }
}
.img{
    width: 100px;
    height: 100px;
    margin-right: 5px;
}
</style>
